class PayCustWizard extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            authedList : [],
            paramForm : {}
        }

    }
    
    componentDidMount(){
        this.updateAuthedList(1,10);
    }

    updateAuthedList(page,pageSize){
        postJson("/pay/get3rdAuthedList.x",{page:page,pageSize:pageSize},(data)=>{
            this.pageCount = data.data.size;
            this.setState({authedList:data.data.list});
        })
    }

    goHelp(){
        window.location.href = "/api/v3/cms/anon/getContent?ueditorId=help_wxpay_user_params&template=UecontentWebWithFrame";
    }

    payTest(gzh){
        if(!gzh.mchId || !gzh.APISecret){
            layui.layer.msg("商户号或API秘钥不完整!");
            return;
        }

        this.refs.modalPayTest.show({typeData:'/pay/getPayTestQRCode.x'});
    }

    inputOnchange(param,value){
        this.state.paramForm[param] = value;
        this.setState({paramForm:this.state.paramForm});
    }

    addNewParams(gzh){
        this.state.paramForm.mchId = gzh.mchId;
        this.state.paramForm.secret = gzh.APISecret;
        this.setState({});
        this.refs.modal.show({value:gzh});
    }

    saveParams(){
        let data = this.refs.modal.value;
        this.state.paramForm.id = data.id;
        this.state.paramForm.appId = data.authorization_info.authorizer_appid;
        this.state.paramForm.type = "wx_h5";
        console.log("data",data);
        console.log("state",this.state.paramForm);
        postJson("/customer/pay/saveSecretByUser.x",this.state.paramForm,()=>{
            layui.layer.msg("保存成功");
            this.refs.modal.close();
            this.refs.table.refresh();
        })
    }

    render(){
        console.log(this.state);
        return(
            <Frame header="支付信息管理" headerBtns={[<HeaderBtn onClick={()=>this.goHelp()}><i className="fa fa-question-circle-o" style={{fontSize:16}}></i>&nbsp;帮助文档</HeaderBtn>]}>
                <Tab type="brief" titles={['公众号授权','已授权公众号列表']}>
                    <TabItem show="true">
                        <Blockquote>请使用公众号绑定的微信扫描下方授权二维码</Blockquote>
                        <iframe src="/pay/getWeixin3rdAuthQRCodePage.x"
                                style={{width:'100%', height:600, overflow:'visible'}}
                                width="100%"
                                height="600px"
                                scrolling="no"
                                frameBorder="0"
                                ref="iframe"
                        ></iframe>
                    </TabItem>
                    <TabItem>
                        <Table count={this.pageCount} ref="table"
                               pageOnClick={(page,pageSize)=>this.updateAuthedList(page,pageSize)}>
                            <thead>
                                <tr>
                                    <th width={100}>图标</th>
                                    <th>简称</th>
                                    <th>公司名称</th>
                                    <th>商户号</th>
                                    <th>API秘钥</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            {
                                this.state.authedList.length > 0?this.state.authedList.map((gzh)=>{
                                    if(gzh.authorizer_info)
                                        return (
                                            <tr>
                                                <td height={100}><img src={gzh.authorizer_info.head_img}></img></td>
                                                <td>{gzh.authorizer_info.nick_name}</td>
                                                <td>{gzh.authorizer_info.principal_name}</td>
                                                <td>{gzh.mchId?gzh.mchId:'未录入'}</td>
                                                <td>{gzh.APISecret?gzh.APISecret:'未录入'}</td>
                                                <td>
                                                    <Button btnType="normal" size="xs" onClick={()=>this.payTest(gzh)}>支付测试</Button>
                                                    <Button btnType="primary" size="xs" onClick={()=>this.addNewParams(gzh)}>参数录入</Button>
                                                </td>
                                            </tr>
                                        )
                                }):''
                            }
                            </tbody>
                        </Table>
                    </TabItem>
                </Tab>
                <Modal title="微信支付参数录入" ref="modal">
                    <Blockquote size="sm">参数获取请参考帮助文档</Blockquote>
                    <Form size="sm">
                        <Item>
                            <Label>微信商户号</Label>
                            <Input value={this.state.paramForm.mchId} onChange={(value)=>this.inputOnchange('mchId',value)}/>
                        </Item>
                        <Item>
                            <Label>微信API秘钥</Label>
                            <Input value={this.state.paramForm.secret} onChange={(value)=>this.inputOnchange('secret',value)}/>
                        </Item>
                        <Item>
                            <Button formBtn="true" size="sm" onClick={()=>this.saveParams()}>保存</Button>
                        </Item>
                    </Form>
                </Modal>
                <Modal title="支付测试" modalType="photo" ref="modalPayTest">
                </Modal>
            </Frame>
        )
    }
    
}

ReactDOM.render(<PayCustWizard/>,document.getElementById("payCustWizard"));